﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>产品列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="__STATIC__heiseshop_admin/style/adminStyle.css" rel="stylesheet" type="text/css" />
<script src="__STATIC__heiseshop_admin/js/jquery.js"></script>
<script src="__STATIC__heiseshop_admin/js/public.js"></script>
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/app.css">
<script src="__STATIC__heiseshop_admin/js/amazeui.min.js"></script>
</head>
<style>
    .am-fr a{
      color: black;
      background-color: black;
    }
    th{
      text-align: center;
    }
  </style>
<body>
 <div class="wrap">
  <div class="page-title">
    <span class="modular fl"><i></i><em>产品列表</em></span>
    <span class="modular fr"><a href="{:url('shop/add_product')}" class="pt-link-btn">+添加商品</a></span>
  </div>
  <div class="operate">
   <form>
    <select class="textBox inline-select" name="cat_id" onchange="cat(this);">
            <option class="cat_search" value="" >全部</option>
        {foreach name="cat" id="v"}
        <optgroup label="{$v.name}" >
            {if condition="isset($v['son'])"}
            {foreach name="v['son']" id="v1"}
            <option class="cat_search" value="{$v1.id}">{$v1.name}</option>
            {/foreach}
            {/if}
        </optgroup>            
        {/foreach}
    </select>
    <input type="text" class="textBox length-long search" placeholder="输入商品名称..."/>
    <input type="button" value="查询" class="tdBtn search_btn"/>
   </form>
  </div>
  <table class="list-style Interlaced">
   <tr>
    <th>ID编号</th>
    <th>产品</th>
    <th>名称</th>
    <th>市场价</th>
    <th>会员价</th>
    <th>库存</th>
    <th>精品</th>
    <th>新品</th>
    <th>热销</th>
    <th>操作</th>
   </tr>
  

   <tbody id="ajax-tbody">

  </tbody>
   
  </table>
  <!-- BatchOperation -->
  <div style="overflow:hidden;">
      <!-- Operation -->
	  <div class="BatchOperation fl">
	   <input type="checkbox" id="del"/>
	   <label for="del" class="btnStyle middle">全选</label>
	   <input type="button" value="批量删除" class="btnStyle piliang"/>
	  </div>
	  <!-- turn page -->
    <div class="am-u-lg-12 am-cf" style="width:83%">

        <div class="am-fr ajax-page">
            {$page}
        </div>
    </div>
  </div>
 </div>
 <div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">是否删除</div>
       <!-- <div class="am-modal-bd">
        你，确定要删除这条id为<span id="span"></span>的记录吗？
        </div> -->
        <span id="span" style="display:none"></span>
        <div class="am-modal-footer">
        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
        <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
</body>
</html>
<script src="__STATIC__heiseshop_admin/js/template.js"></script>
<script type="text/html" id="ajax-content">
    <%for (var i = 0; i<data.length; i++){%>
        <tr>
            <td>
             <span>
             <input type="checkbox" name="checkbox" value="<%=data[i].id%>" class="middle children-checkbox"/>
             <i><%=data[i].id%></i>
             </span>
            </td>
            <td class="center pic-area"><img src="__UPLOAD__<%=data[i].src%>" class="thumbnail"/></td>
            <td class="td-name">
              <span class="ellipsis td-name block" style="text-align: center;"><%=data[i].shopname%></span>
            </td>
            <td class="center">
             <span>
              <i>￥</i>
              <em><%=data[i].price%>.00</em>
             </span>
            </td>
            <td class="center">
             <span>
              <i>￥</i>
              <em><%=data[i].discount%>.00</em>
             </span>
            </td>
            <td class="center">
             <span>
              <em><%=data[i].stoke%></em>
              <i>件(套)</i>
             </span>
            </td>
            <td class="center"><img src="__STATIC__heiseshop_admin/images/yes.gif"/></td>
            <td class="center"><img src="__STATIC__heiseshop_admin/images/no.gif"/></td>
            <td class="center"><img src="__STATIC__heiseshop_admin/images/yes.gif"/></td>
            <td class="center">
             <a href="{:url('shop/guige')}?id=<%=data[i].id%>" title="添加规格" ><img src="__STATIC__heiseshop_admin/images/icon_view.gif"/></a>
             <a href="{:url('shop/edit_product')}?id=<%=data[i].id%>" title="编辑"><img src="__STATIC__heiseshop_admin/images/icon_edit.gif"/></a>
             <a class="delete" data-id="<%=data[i].id%>" title="删除"><img src="__STATIC__heiseshop_admin/images/icon_drop.gif"/></a>
            </td>
           </tr>
    <%}%>
</script>

<script>
$(function(){
    $('#ajax-tbody').on('click','.delete',function(){
        var id=$(this).data('id');
        $('#span').html(id);
        $('#my-confirm').modal({
            onConfirm: function(){
                $.ajax({
                    data:'id='+$('#span').html(),
                    url:"{:url('delect')}",
                    success:function(res){
                        ajax();
                    }
                })
            }
        })
        return false;
    })
})
function ajax (url) {
    var config = {
        success : function (res) { 
            tpl(res)
        }
    };
    if (url) {
        config.url = url;
    }else{
        config.data='page='+$('input[name=current_page]').val();
    }
    $.ajax(config);
}
ajax();

$('.ajax-page').on('click' , 'a' , function(){
    var _this = $(this);
    ajax(_this.attr('href'));
    return false;
});

function tpl(res){
    var html = template(document.getElementById('ajax-content').innerHTML , {'data':res.shoper_list.data});
    $('#ajax-tbody').html(html);
    $('.ajax-page').html(res.page);
    $('.ajax-page').append('<input type="hidden" name="current_page" value="'+res.current_page+'">');        
}

$('.search_btn').click(function(){
    var search=$('.search').val();
    $.ajax({
        url : "{url('product_list')}",
        data:'search='+search,            
        success:function(res){
            tpl(res)   
        }
    })
})
function cat(res){
    var cat_search=$(res).val();
    $.ajax({
        url : "{url('product_list')}",
        data:'cat_search='+cat_search,            
        success:function(res){
            tpl(res)   
        }
    })
}

$('.search').keydown(function(e){
    if(e.which==13){
        $('.search_btn').click();
        return false;
    }
})
$('#del').click(function(){
  if(this.checked){
      $('input[name="checkbox"]').each(function(){
          this.checked=true;
      })
  }else{
      $('input[name="checkbox"]').each(function(){
          this.checked=false;
      })
  }
})
$('.piliang').click(function(){
       $('#my-confirm').modal({
            onConfirm: function(){
              $('input[name="checkbox"]:checked').each(function(){
                var id=$(this).val();
                $.ajax({
                    data:'id='+id,
                    url:"{:url('delect')}",
                    success:function(res){
                        ajax();
                        $("#del").removeAttr("checked");
                    }
                })
            })
        }
    })
})
</script>